<template>
  <view class="page-content">
    <view style="padding: 0 32rpx">
      <view class="content-box">
        <view class="notice-box">
          <u-notice-bar
            mode="horizontal"
            :list="list"
            color="#000000"
            bg-color="rgba(255,214,0,0.25)"
            border-radius="4"
            :volume-icon="false"
            font-size="20"
          ></u-notice-bar>
        </view>
        <form-item-title text="基本信息"></form-item-title>
        <view class="form-box">
          <u-form :label-style="labelStyle">
            <view class="flex-row justify-between items-center group_6">
              <text class="font_3 text_7">本人照片</text>
              <u-upload
                :action="action"
                :file-list="fileList"
                height="120"
                width="120"
                :header="header"
                max-count="1"
                upload-text=""
                ref="avaterUpload"
              ></u-upload>
            </view>
            <u-form-item label="姓名"
              ><u-input input-align="right" v-model="form.name"
            /></u-form-item>
            <u-form-item label="年龄"
              ><u-input input-align="right" type="number" v-model="form.age"
            /></u-form-item>

            <u-form-item label="性别"
              ><u-input
                :disabled="true"
                input-align="right"
                @click="showSex = true"
                v-model="sexlabel"
                type="select"
            /></u-form-item>
          </u-form>
        </view>
      </view>
      <form-item-title text="专业信息"></form-item-title>
      <view class="content-box">
        <view class="form-box">
          <u-form-item label="擅长" :label-style="labelStyle"
            ><u-input input-align="right" v-model="form.genius"
          /></u-form-item>
          <u-form-item label="毕业院系" :label-style="labelStyle"
            ><u-input input-align="right" v-model="form.graduationInstitution"
          /></u-form-item>
          <u-form-item label="目前就职公司" :label-style="labelStyle"
            ><u-input input-align="right" v-model="form.company"
          /></u-form-item>
        </view>
      </view>
      <form-item-title text="资格证明"></form-item-title>
      <view class="content-box">
        <view class="form-box">
          <view class="flex-row justify-between items-center group_5">
            <view class="font_2 text_3">兽医资格证</view>
            <text class="font_4">未上传</text>
          </view>

          <view class="flex-row justify-center items-center">
            <u-upload
              :action="action"
              max-count="1"
              :header="header"
              upload-text="正面"
              ref="veterinaryCertificateFront"
            ></u-upload>
            <u-upload
              :action="action"
              :header="header"
              max-count="1"
              upload-text="反面"
              ref="veterinaryCertificateBack"
            ></u-upload
          ></view>
        </view>
      </view>
      <form-item-title text="服务费用"></form-item-title>
      <view class="content-box">
        <view class="form-box">
          <u-form-item label="外出诊疗" :label-style="labelStyle"
            ><u-input
              input-align="right"
              placeholder="价格/次"
              v-model="form.cost1"
              type="number"
          /></u-form-item>
          <u-form-item label="公猫绝育" :label-style="labelStyle"
            ><u-input
              input-align="right"
              v-model="form.cost2"
              type="number"
              placeholder="价格/次"
          /></u-form-item>
          <u-form-item label="母猫绝育" :label-style="labelStyle"
            ><u-input
              input-align="right"
              v-model="form.cost3"
              type="number"
              placeholder="价格/次"
          /></u-form-item>
          <u-form-item label="公犬绝育" :label-style="labelStyle"
            ><u-input
              input-align="right"
              v-model="form.cost4"
              type="number"
              placeholder="价格/次"
          /></u-form-item>
          <u-form-item label="母犬绝育" :label-style="labelStyle"
            ><u-input
              input-align="right"
              v-model="form.cost5"
              type="number"
              placeholder="价格/次"
          /></u-form-item>
          <u-form-item label="牙齿清洗" :label-style="labelStyle"
            ><u-input
              input-align="right"
              v-model="form.cost6"
              type="number"
              placeholder="价格/次"
          /></u-form-item>
          <u-form-item label="妙三多" :label-style="labelStyle"
            ><u-input
              input-align="right"
              v-model="form.cost7"
              type="number"
              placeholder="价格/次"
          /></u-form-item>
          <u-form-item label="犬八联" :label-style="labelStyle"
            ><u-input
              input-align="right"
              v-model="form.cost8"
              type="number"
              placeholder="价格/次"
          /></u-form-item>
          <u-form-item label="犬驱虫" :label-style="labelStyle"
            ><u-input
              input-align="right"
              v-model="form.cost9"
              type="number"
              placeholder="价格/次"
          /></u-form-item>
          <u-form-item label="猫驱虫" :label-style="labelStyle"
            ><u-input
              input-align="right"
              v-model="form.cost10"
              type="number"
              placeholder="价格/次"
          /></u-form-item>
        </view>
      </view>
      <view class="content-box">
        <view class="form-box">
          <u-form-item
            label="备注"
            :label-style="labelStyle"
            label-position="top"
          >
            <u-input type="textarea" v-model="form.remark" />
          </u-form-item>
        </view>
      </view>
    </view>
    <view class="bottom-box" @click="add">
      <view class="form-box">
        <view class="flex-row justify-between items-center group_16">
          <view class="flex-col justify-start items-center button_4"
            ><text class="font text_29">立即发布</text></view
          >
        </view>
      </view>
    </view>
    <u-select
      v-model="showSex"
      mode="single-column"
      :list="sexlist"
      @confirm="handlesexconfirm"
    ></u-select>
  </view>
</template>

<script>
import url from '../../../../utils/config.js'
import utils from '../../../../utils/util.js'
import formItemTitle from 'components/index/form-item-title.vue'
import { addDoctor } from '@/api/cwbl.js'
export default {
  data() {
    return {
      showSex: false,
      sexlabel: '',
      sexlist: [
        {
          value: '男',
          label: '男',
        },
        {
          value: '女',
          label: '女',
        },
      ],
      list: [
        '温馨提示：感谢您使用宠行宝•宠物巴士服务，平台提供信息共享服务，请您保护好自己的财产安全，期间的财物及人身安全责任需自行承担。',
      ],
      action: url.mobeilURL + '/common/uploadFile', // 图片上传地
      header: {
        'content-type': 'multipart/form-data',
        Authorization: uni.getStorageSync('cxbtoken'),
      },
      fileList: [],
      labelStyle: {
        fontWeight: 'bold',
        fontSize: '28rpx',
        whiteSpace: 'nowrap',
      },
      form: {
        id: null,
        phone: null,
        name: null,
        age: null,
        sex: null,
        genius: null,
        graduationInstitution: null,
        company: null,
        veterinaryCertificateFront: null,
        veterinaryCertificateBack: null,
        cost1: null,
        cost2: null,
        cost3: null,
        cost4: null,
        cost5: null,
        cost6: null,
        cost7: null,
        cost8: null,
        cost9: null,
        cost10: null,
        remark: null,
        createTime: null,
        status: null,
        publisher: null,
        publisherId: null,
      },
    }
  },
  components: {
    formItemTitle,
  },
  onShow() {
    utils
      .getLocationInfo()
      .then((res) => {
        this.form.lat = res.longitude
        this.form.lng = res.latitude
        this.form.address = res.name
      })
      .catch((err) => {
        this.form.lat = ''
        this.form.lng = ''
        this.form.address = ''
      })
  },
  methods: {
    handlesexconfirm(val) {
      this.form.sex = val[0].value
      this.sexlabel = val[0].label
    },
    async add() {
      let filesAvater = this.$refs.avaterUpload.lists.filter((val) => {
        return val.progress == 100
      })
      let filesFront = this.$refs.veterinaryCertificateFront.lists.filter(
        (val) => {
          return val.progress == 100
        }
      )
      let filesBack = this.$refs.veterinaryCertificateBack.lists.filter(
        (val) => {
          return val.progress == 100
        }
      )
      let photoArr1 = []

      if (filesAvater.length) {
        filesAvater.forEach((item) => {
          if (item.response.accessPath) {
            photoArr1.push(item.response.accessPath)
          }
        })
      }
      if (filesFront.length) {
        this.form.veterinaryCertificateFront = filesFront[0].response.accessPath
      }
      if (filesBack.length) {
        this.form.veterinaryCertificateBack = filesBack[0].response.accessPath
      }
      this.form.phone = photoArr1.join(',')
      let userInfo = uni.getStorageSync('userinfo')
      this.form.publisherId = userInfo.id
      this.form.publisher = userInfo.nickName
      this.form.publisher = userInfo.nickName
      this.form.publisher = userInfo.nickName

      let res = await addDoctor(this.form)
      if (res.code == 200) {
        uni.showToast({
          title: '发布成功',
          icon: 'none',
        })
        uni.navigateBack()
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.page-content {
  height: 100%;
  background-color: #f6f6f6;

  .content-box {
    width: 100%;
    background: #ffffff;
    border-radius: 16rpx 16rpx 16rpx 16rpx;

    .notice-box {
      padding: 24rpx;
    }

    .form-box {
      padding: 0 32rpx;
      margin-bottom: 40rpx;

      .group_6 {
        padding: 32rpx 0;
        border-bottom: solid 2rpx #f3f3f3;

        .font_3 {
          font-size: 28rpx;
          font-family: PingFang SC;
          line-height: 25.76rpx;
          font-weight: 700;
          color: #000000;
        }

        .text_7 {
          line-height: 26.02rpx;
        }

        .image-wrapper {
          background-color: #ececec;
          border-radius: 50%;
          display: flex;
          justify-content: center;
          align-items: center;
          width: 100rpx;
          height: 100rpx;
          font-size: 30px;
          color: #999999;
        }
      }
    }

    .group_5 {
      padding: 40rpx 0;
      border-bottom: solid 2rpx #f3f3f3;

      .font_2 {
        font-size: 28rpx;
        font-family: PingFang SC;
        line-height: 26.18rpx;
        font-weight: 700;
        color: #000000;
      }

      .text_3 {
        line-height: 25.7rpx;
      }

      .font_4 {
        font-size: 28rpx;
        font-family: PingFang SC;
        line-height: 20.78rpx;
        font-weight: normal;
        color: #999999;
      }
    }
  }

  .bottom-box {
    padding: 16rpx 0;
    background: #ffffff;
    box-shadow: 0rpx -8rpx 30rpx 0rpx rgba(0, 0, 0, 0.05);
    border-radius: 24rpx 24rpx 0rpx 0rpx;

    .mt-7 {
      margin-top: 14rpx;
    }

    .group_16 {
      padding-left: 36rpx;
      padding-right: 28rpx;

      .button_3 {
        width: max-content;

        .font_3 {
          font-size: 24rpx;
          font-family: PingFang SC;
          line-height: 22.4rpx;
          font-weight: 700;
          color: #666666;
        }

        .text_28 {
          color: #000000;
        }

        .section_11 {
          padding: 6rpx 20rpx;
          background-color: #f6f6f6;
          border-radius: 60rpx;

          .text_31 {
            color: #000000;
            font-size: 24rpx;
            line-height: 17.72rpx;
          }

          .text_30 {
            color: #ff7676;
            font-size: 40rpx;
            line-height: 28.48rpx;
            width: 180rpx;
          }
        }
      }

      .button_4 {
        padding: 28rpx 0;
        background-color: #fbd610;
        border-radius: 68rpx;
        width: 100%;
        height: 84rpx;

        .font {
          font-size: 32rpx;
          font-family: PingFang SC;
          line-height: 30.02rpx;
          font-weight: 700;
          color: #000000;
        }

        .text_29 {
          line-height: 29.88rpx;
        }
      }
    }
  }

  /deep/.u-upload {
    justify-content: center;
    flex-wrap: nowrap;
    overflow-x: auto;
  }

  /deep/ .u-add-tips {
    display: none;
  }
}
</style>